首先我們先將想要顯現圖片的elements都選起來
再監聽window的捲軸滾動事件

const slideImages = document.querySelectorAll('.slide-in');
function checkSlide(e) {
    console.log(e)
}
window.addEventListener('scroll', checkSlide);

會發現滾動一下就跑出一堆的event
所以我們使用debounce來幫助我們濾掉短時間內的多次觸發

debounce的原理

每次執行前清空上一次的計時器clearTimeount(timeout)
再設置一個計時器timeout = setTimeount(later, wait)
只要過nmillion seconds後
就會將timeout變成null
讓他再執行一次「重設計時器」

.apply()

調用具有給定this的函式，將參數已類陣列的方式傳入

function debounce(func, wait = 20, immediate = true) {
    var timeout;
    return function () {
        var context = this,
            args = arguments;
        var later = function () {
            timeout = null;
            if (!immediate) func.apply(context, args);  //不立即執行則是隔waitms後執行
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);  //立即執行後再隔20ms
    };
}

function checkSlide(e) {
    console.log(e)
}
window.addEventListener('scroll', debouncd(checkSlide));

我們想要「圖高於視窗底部一半」時顯現
所以先找出圖的一半slideinAt
並寫個booleanisHalfShown來判斷是否超過一半了

這樣就可以實現：圖片滑入一半圖片顯示

function checkSlide() {
    slideImages.forEach(slideImage => {
        //視窗底部往上"圖片一半高"
        const slideinAt = window.scrollY + window.innerHeight - slideImage.height / 2;
        //image的底部
        const imageBottom = slideImage.offsetTop + slideImage.height;
        const isHalfShown = slideinHalfAt > slideImage.offsetTop;
        const isNotScrolldedPast = window.scrollY < imageBottom;
    });
}

接者我們要來實現圖片離開視窗後縮回去
找出圖片的底部imageBottom
然後寫個boolean讓圖片底部大於window.scrollY

最後在寫判別式
如果一半顯示且圖片還沒離開視窗
則新增一個.active
其他情況則移除.active

function checkSlide() {
    slideImages.forEach(slideImage => {
        //視窗底部往上"圖片一半高"
        const slideinAt = window.scrollY + window.innerHeight - slideImage.height / 2;
        //image的底部
        const imageBottom = slideImage.offsetTop + slideImage.height;
        const isHalfShown = slideinHalfAt > slideImage.offsetTop;
        const isNotScrolldedPast = window.scrollY < imageBottom;
        if (isHalfShown && isNotScrolldedPast) {
            slideImage.classList.add("active");
        } else {
            slideImage.classList.remove("active");
        }
    });
}

參考資料：
Demystifying Debounce in JavaScript

Demo
完整程式碼